import React from 'react'
import {Button, Col, Form, Input, Modal, Row, Select, Table} from '../../antd'
import Http from "../utils/http"

const Option = Select.Option;
const FormItem = Form.Item;
const Search = Input.Search;
const CollectionSearchlForm = Form.create()(
    (props) => {
        const {
            visible, onCancel, form, options, onRowDoubleClickCallBack, columns,
            state, handleSearch, handleReset, pagination, onChange,multiple,handleOk,rowSelection
        } = props;
        const {getFieldDecorator} = form;

        const formItemLayout = {
            labelCol: {span: 8},
            wrapperCol: {span: 16},
            colon: false,
        };

        if(multiple) {
            return (
                <Modal
                    visible={visible}
                    title="供应商查询工具"
                    footer={false}
                    width="1000"
                    maskClosable={false}
                    onCancel={onCancel}
                    onOk={handleOk}
                >
                    <Form>
                        <Row gutter={16}>
                            <Col xs={24} sm={24} md={10} lg={10} xl={10}>
                                <FormItem {...formItemLayout} label='供应商编码'>
                                    {getFieldDecorator('suppliercode')(
                                        <Input/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col xs={24} sm={24} md={10} lg={10} xl={10}>
                                <FormItem {...formItemLayout} label='供应商名称'>
                                    {getFieldDecorator('suppliername')(
                                        <Input/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col style={{textAlign: 'left', marginBottom: 24}}>
                                <Button type="primary" style={{marginLeft: 8}} onClick={handleSearch}>查询</Button>
                                <Button type="primary" style={{marginLeft: 8}} onClick={handleOk}>确定</Button>
                                <Button style={{marginLeft: 8}} onClick={handleReset}>清空</Button>
                            </Col>
                        </Row>

                        <Table
                            rowKey={record => record.supplierno}
                            rowSelection={rowSelection}
                            size="small"
                            columns={columns}
                            onChange={onChange}
                            pagination={pagination}
                            dataSource={state.data}
                            bordered={true}
                            scroll={{y: 360}}/>
                    </Form>
                </Modal>
            );
        } else {
            return (
                <Modal
                    visible={visible}
                    title="供应商查询工具"
                    footer={false}
                    width="1000"
                    maskClosable={false}
                    onCancel={onCancel}
                >
                    <Form>
                        <Row gutter={16}>
                            <Col xs={24} sm={24} md={10} lg={10} xl={10}>
                                <FormItem {...formItemLayout} label='供应商编码'>
                                    {getFieldDecorator('suppliercode')(
                                        <Input/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col xs={24} sm={24} md={10} lg={10} xl={10}>
                                <FormItem {...formItemLayout} label='供应商名称'>
                                    {getFieldDecorator('suppliername')(
                                        <Input/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col style={{textAlign: 'left', marginBottom: 16}}>
                                <Button type="primary" style={{marginLeft: 8}} onClick={handleSearch}>查询</Button>
                                <Button style={{marginLeft: 8}} onClick={handleReset}>清空</Button>
                            </Col>
                        </Row>

                        <Table
                            size="small"
                            columns={columns}
                            onChange={onChange}
                            pagination={pagination}
                            dataSource={state.data}
                            onRowDoubleClick={onRowDoubleClickCallBack}
                            bordered={true}
                            scroll={{y: 360}}/>
                    </Form>
                </Modal>
            );
        }

    }
);

class SupplierSearch extends React.Component {
    columns = [{
        title: '供应商编码',
        dataIndex: 'supplierno',
        key: 'supplierno',
        className: 'operation',
        width: 150,
    }, {
        title: '供应商名称',
        dataIndex: 'suppliername',
        key: 'suppliername',
        className: 'operation',
        width: 300
    }];

    pagination = {
        current: 1,
        defaultPageSize: 50,
        showTotal: function (total, range) {
            return `共 ${total} 条记录`
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible:false,
            pagination: this.pagination,
            selectedRowKeys:[],
            value: props.value
        };
    }

    saveFormRef = (form) => {
        this.form = form;
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.setState({
            pagination
        })
        this.search(pagination);
    }
    handleSearch = () => {
        const pagination = {...this.state.pagination};
        pagination.current = 1;
        this.setState({
            pagination
        })
        this.search(pagination);
    }

    rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.setState({selectedRowKeys});
        },
    };

    handleOk = (e) => {
        const selectRowKeys = this.state.selectedRowKeys;
        this.props.handleOk(selectRowKeys);
        console.log(selectRowKeys);
        this.changeVisible();
    }

    search = (pagination) => {
        const form = this.form;
        let filter = form.getFieldsValue();
        let param = this.props.param || {};
        let current = pagination.current;
        let pageSize = pagination.defaultPageSize;
        let url=`${API_URL}settlement-hub/hub/bill/data/supplier/search`;
        Http.post({
            url: url,
            params: {
                ...filter,
                ...param,
                pageindex: current,
                pagesize: pageSize
            },
            // data: {
            //     ...filter,
            //     ...param,
            //     pageindex: current,
            //     pagesize: pageSize
            // }
        })
            .then(rs => {
                console.log(rs)
                const pagination = {...this.state.pagination};
                let data = [];
                if (rs.code == '0') {
                    pagination.total = rs.data.total;
                    data = rs.data.rows;
                } else {
                    pagination.total = 0;
                }
                this.setState({
                    data,
                    pagination
                })
            })
            .catch((error) => {
                console.log(`error: ${error}`);
                console.log(error)
                this.setState({
                    data: [],
                    pagination: {
                        ...this.state.pagination,
                        total: 0
                    }
                })
            });
    }
    onRowDoubleClickCallBack = (record) => {
        let value = record.supplierno;
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(value);
        }

        this.changeVisible();
    }
    handleReset = () => {
        // 重置筛选条件
        const form = this.form;
        form.resetFields();
    }
    changeVisible=()=>{
        this.state.data = [];
        this.setState({
            visible: !this.state.visible
        })
    }

    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState({value});
        }
    }
    handleInputChange = (e) => {
        const value = e.target.value;
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(value);
        }
    }

    render() {
        return (
            <div>
                <Search
                    placeholder="供应商编号"
                    enterButton="查询"
                    onSearch={value => this.changeVisible()}
                    value={this.state.value}
                    onChange={e => this.handleInputChange(e)}
                />
                <CollectionSearchlForm
                    ref={this.saveFormRef}
                    visible={this.state.visible}
                    pagination={this.state.pagination}
                    onChange={this.handleTableChange}
                    multiple={this.props.multiple}
                    onCancel={this.changeVisible}
                    onRowDoubleClickCallBack={this.onRowDoubleClickCallBack}
                    columns={this.columns}
                    state={this.state}
                    handleSearch={this.handleSearch}
                    handleReset={this.handleReset}
                    rowSelection = {this.rowSelection}
                    handleOk = {this.handleOk}
                />
            </div>

        );
    }
}

export default SupplierSearch;